<template>
  <SubLayout @refresh="refresh" :breadcrumb="false" :showRefresh="true">
    <!-- 操作栏 -->
    <template #bread>
      <router-link to><span @click="router.go(-1)">应用列表</span></router-link>
      <el-icon class="route-icon">
        <arrow-right />
      </el-icon>
    </template>
    <template #left>
      <OrgCascader
        placeholder="请筛选部门"
        v-model="query.orgId"
        :clearable="true"
        @query-change="queryChange"
      />
      <el-select
        v-model="query.httpStatus"
        placeholder="请选择状态"
        @change="queryChange"
        clearable
      >
        <el-option
          v-for="(item, index) in statusList"
          :key="index"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <el-input
        class="input last"
        placeholder="搜索应用名称"
        v-model="query.appName"
        @input="queryChange"
      />
      <el-button type="primary" @click="reset">重置</el-button>
    </template>
    <template #default>
      <!-- 表格 -->
      <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="changeTab">
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.name"
          :name="item.value"
        />
      </el-tabs>
      <DynamicTable
        ref="DynamicTable"
        v-loading="listLoading"
        class="table-container"
        :total="total"
        v-model:current="page.current"
        v-model:size="page.size"
        :data="list"
        :columns="tableColumns"
        @pagination="getList"
      />
      <!-- 详情 -->
      <DetailDrawer
        v-model="showDetail"
        :title="activeTab == 1 ? '服务日志详情' : '事件日志详情'"
        :id="currentId"
        :item="currentItem"
      />
    </template>
  </SubLayout>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive, onActivated } from "vue";
import { useListManage } from "@/hooks";
import { Search, ArrowRight } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import OrgCascader from "@/components/OrgCascader/";
import DetailDrawer from "./components/DetailDrawer.vue";
import {
  getAppEvtLogPageList,
  getAppSvcLogPageList,
  getAppEvtLogDetail,
  getAppSeverLogDetail,
} from "@/api/application";
import { parseTime } from "@/utils";
// 组建调用
import Header from "@/components/Header.vue";
import DynamicTable from "@/components/DynamicTable";
import SubLayout from "@/components/SubLayout";
import FilterBar from "@/components/FilterBar.vue";
export default defineComponent({
  name: "ApplicationLog",
  components: {
    SubLayout,
    Header,
    FilterBar,
    DynamicTable,
    OrgCascader,
    DetailDrawer,
    ArrowRight,
  },
  setup(props, { emit, slots }) {
    const route = useRoute();
    const router = useRouter();
    const query = reactive({
      appId: null,
      appName: route.query.name,
      orgId: null,
      httpStatus: null,
      appName: null,
    });
    const DynamicTable = ref(null);
    let { page, list, total, editType, listLoading, handleCreate, reset } =
      useListManage(props, emit, {
        getItems: null,
        query: query,
        deleteItem: null,
        getDetail: null,
      });
    const activeTab = ref("1");
    const tabList = ref([
      {
        name: "服务列表",
        value: "1",
        fun: getAppSvcLogPageList,
      },
      {
        name: "事件列表",
        value: "2",
        fun: getAppEvtLogPageList,
      },
    ]);
    // 切换表格
    const changeTab = (tab, event) => {
      activeTab.value = tab.props.name;
      page.current = 1;
      getList();
    };
    const queryChange = () => {
      page.current = 1;
      getList(page.current, page.size);
    };
    // 重画页面
    const refresh = () => {
      getList();
    };
    const getList = async (pageNumber = 1, size = 20) => {
      page.current = pageNumber;
      page.size = size;
      tableColumns.value[0].key = activeTab.value == 1 ? "svcName" : "evtName";
      tableColumns.value[0].label =
        activeTab.value == 1 ? "服务名称" : "事件名称";
      tableColumns.value[1].key =
        activeTab.value == 1 ? "svcAppName" : "evtAppName";
      listLoading.value = true;
      const getItems = tabList.value.find(
        (item) => item.value == activeTab.value
      )?.fun;
      const para = {
        ...query,
        ...page,
      };
      const {
        status,
        message,
        data: { list: listData, total: totalCount },
      } = await getItems(para);
      listLoading.value = false;
      if (status === 200) {
        listData.map((item) => {
          item.requestTime = parseTime(item.requestTime);
          // item.requestUseTime = (item.requestUseTime/6000).toFixed(2)
        });
        list.value = listData;
        total.value = totalCount;
      } else {
        ElMessage.warning(message);
      }
    };
    const showDetail = ref(false);
    const currentId = ref(null);
    const currentItem = ref({});
    const handleDetail = async (row, index) => {
      console.log(row);
      console.log(activeTab.value);
      if (activeTab.value == "2") {
        let { data } = await getAppEvtLogDetail(row.id);
        currentItem.value = data;
      } else if (activeTab.value == "1") {
        let { data } = await getAppSeverLogDetail(row.id);
        currentItem.value = data;
      }

      currentId.value = row.id;
      // currentItem.value = row;
      showDetail.value = true;
    };
    const statusList = ref([
      {
        name: "成功",
        value: "200",
      },
      {
        name: "失败",
        value: "-1",
      },
    ]);
    const tableColumns = ref([
      {
        label: "服务名称",
        key: "",
        minWidth: "300px",
      },

      {
        label: "所属应用",
        key: "appName",
        minWidth: "200px",
      },
      {
        label: "所属部门",
        key: "orgName",
        minWidth: "250px",
      },
      {
        label: "请求时长(ms)",
        key: "requestUseTime",
        minWidth: "120px",
      },
      {
        label: "请求时间",
        key: "requestTime",
        minWidth: "200px",
      },
      {
        label: "状态",
        minWidth: "100px",
        render: (h, { row, index }) => (
          <div class="tab-status-tag">
            <b class={row.httpStatus == 200 ? "success" : "error"} />
            <span class={row.httpStatus == 200 ? "success" : "error"}>
              {row.httpStatus == 200 ? "成功" : "失败"}
            </span>
          </div>
        ),
      },
      {
        label: "操作",
        fixed: "right",
        width: "100px",
        render: (h, params) => (
          <span>
            {
              <el-button
                type="text"
                size="small"
                onClick={() => handleDetail(params.row, params.index)}
              >
                详情
              </el-button>
            }
          </span>
        ),
      },
    ]);
    onActivated(() => {
      query.appId = route.params.id;
      query.appName = route.query.name;
      activeTab.value = "1";
      queryChange();
    });
    onMounted(() => {
      query.appId = route.params.id;
      query.appName = route.query.name;
      getList();
    });

    return {
      page,
      total,
      getList,
      route,
      Search,
      list,
      listLoading,
      editType,
      query,
      queryChange,
      handleCreate,
      tableColumns,
      refresh,
      DynamicTable,
      statusList,
      // 查看
      handleDetail,
      showDetail,
      currentId,
      currentItem,
      router,
      // 切换tab
      activeTab,
      changeTab,
      tabList,
      reset,
    };
  },
});
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 200px);
}

.el-tabs {
  margin-top: 20px;
}

:deep(.tab-status-tag) {
  b {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: 0.1em;

    &.error {
      background: rgba(255, 58, 58, 1);
    }

    &.finish {
      background: rgba(255, 139, 58, 1);
    }

    &.success {
      background: rgba(42, 207, 138, 1);
    }
  }

  span {
    &.error {
      color: rgba(255, 58, 58, 1);
    }

    &.finish {
      color: rgba(255, 139, 58, 1);
    }

    &.success {
      color: rgba(42, 207, 138, 1);
    }
  }
}

.el-select,
:deep(.el-cascader) {
  margin-right: 10px;
}

:deep(.online) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid rgba(42, 207, 138, 1);
  color: rgba(42, 207, 138, 1);
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/online.png) 100% no-repeat;
  // background-size: 100% 100%;
}

:deep(.outline) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 139, 58, 1);
  color: rgba(255, 139, 58, 1);
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/outline.png) 100% no-repeat;
  // background-size: 100% 100%;
}

:deep(.test) {
  display: inline-block;
  width: 60px;
  height: 22px;
  line-height: 22px;
  border-radius: 22px;
  border: 1px solid #909399;
  color: #909399;
  text-align: center;
  font-size: 12px;
  // background: url(@/assets/application/outline.png) 100% no-repeat;
  // background-size: 100% 100%;
}
</style>
